<style>
    img{
        width: 500px;
    }
</style>


<img height="500" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F1bd9f911554e2f4328cb00ee9558c793384fe0133abb-RWCPsT_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630480917&t=e21826bf75339fc9ea49ab03db249aa4" data="./imgs/01.jpg" alt=""> <hr />
<img height="500" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F1bd9f911554e2f4328cb00ee9558c793384fe0133abb-RWCPsT_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630480917&t=e21826bf75339fc9ea49ab03db249aa4" data="./imgs/02.jpg" alt=""><hr />
<img height="500" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F1bd9f911554e2f4328cb00ee9558c793384fe0133abb-RWCPsT_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630480917&t=e21826bf75339fc9ea49ab03db249aa4" data="./imgs/03.jpg" alt=""><hr />
<img height="500" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F1bd9f911554e2f4328cb00ee9558c793384fe0133abb-RWCPsT_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630480917&t=e21826bf75339fc9ea49ab03db249aa4" data="./imgs/04.jpg" alt=""><hr />
<img height="500" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F1bd9f911554e2f4328cb00ee9558c793384fe0133abb-RWCPsT_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630480917&t=e21826bf75339fc9ea49ab03db249aa4" data="./imgs/05.jpg" alt=""><hr />

<script>
// 1 写好功能
// 2 事件外面定义t
// 3 事件里面将功能通过定时器setTimeout包起来重置t
// 4 事件里面判断  clearTimeout防抖、return节流
let t
function lazyload() {
    if (t) return
    // if (t) clearTimeout(t)
    t = setTimeout(() => {
        console.log('代码执行了');
// 3、发现滚动
//     3.1 计算可视区域总高度
//         公式1：window.innerHeight  浏览器窗口的视口的高度
//         公式2：window.innerHeight + document.documentElement.scrollTop
//               浏览器窗口的视口的高度 + 当前滚动条滚动条的高度
       let h1 = window.innerHeight || document.documentElement.clientHeight
       let h2 = document.documentElement.scrollTop || document.body.scrollTop
       let showTotalHeight = h1 + h2 
//     3.2 获取所有图片
        let imgs = document.querySelectorAll('img') // [JS图片标签对象,...,]
        // console.log(imgs);
//     3.3 遍历
        imgs.forEach((item, index) => {// item就是伪数组中的一个个图片标签对象
            // console.log(item);
            // 3.4 判断当前图片到网页左上角的距离 <= 计算可视区域总高度 ？？？
            let imgTop = item.offsetTop 
            // showTotalHeight
            if (imgTop <= showTotalHeight) {
                item.src = item.getAttribute('data')
                // 留心：改了图片地址之后，
                // 因为：浏览器要显示 所以得解析
                // 因此：会发送请求  特别好 用到了再请求
            }
        })

        // 如果节流
        t = null
    }, 500)
}



// 监控滚动条滚动  window.onscroll
window.onscroll = lazyload



lazyload()

</script>